<template>
  <div>
    <el-container style="height: 750px; border: 1px solid #eee">
      <el-header style="
          font-size: 40px;
          text-align: center;
          background-color: rgb(238, 241, 246);
        ">预约挂号系统
        
      </el-header>
      <el-container>
        <el-main>
          <div style="text-align: center">
            <el- style="
                font-size: 30px;
                text-align: center;
                background-color: rgb(238, 241, 246);
              ">内科</el->
              <div style="text-align: left;margin-bottom: 2%;margin-left: 2%;font-size: 20px;" @click="returnToHome">主页</div>
          </div>
          <div class="demo-image__placeholder">
            <div class="block">
              <el-row>
                <el-col :span="5" style="text-align: center;">
                  <div class="grid-content bg-purple">张文豪</div>
                </el-col>
                <el-col :span="5" style="text-align: center;">
                  <div class="grid-content bg-purple-light">王芳</div>
                </el-col>
                <el-col :span="4" style="text-align: center;">
                  <div class="grid-content bg-purple">刘宇航</div>
                </el-col>
                <el-col :span="6" style="text-align: center;">
                  <div class="grid-content bg-purple-light">赵家麟</div>
                </el-col>
                <el-col :span="3" style="text-align: center;">
                  <div class="grid-content bg-purple-light">李丽</div>
                </el-col>
              </el-row>
              <el-image :src="src1" style="width: 250px; height: 300px; margin-left: 30px"></el-image>
              <el-image :src="src" style="width: 250px; height: 300px; margin-left: 30px"></el-image>
              <el-image :src="src2" style="width: 250px; height: 300px; margin-left: 30px"></el-image>
              <el-image :src="src3" style="width: 250px; height: 300px; margin-left: 30px"></el-image>
              <el-image :src="src4" style="width: 250px; height: 300px; margin-left: 30px"></el-image>
            </div>
          </div>
          <el-button style="font-size: 25px; margin-left: 100px" type="primary"
            @click="dialogFormVisible = true">挂号预约</el-button>
          <el-button style="font-size: 25px; margin-left: 125px" type="primary"
            @click="dialogFormVisible = true">挂号预约</el-button>
          <el-button style="font-size: 25px; margin-left: 135px" type="primary"
            @click="dialogFormVisible = true">挂号预约</el-button>
          <el-button style="font-size: 25px; margin-left: 135px" type="primary"
            @click="dialogFormVisible = true">挂号预约</el-button>
          <el-button style="font-size: 25px; margin-left: 155px" type="primary"
            @click="dialogFormVisible = true">挂号预约</el-button>
          <div style="text-align: center">
            <el- style="font-size: 30px; background-color: rgb(238, 241, 246)">外科</el->
          </div>
          <div class="demo-image__placeholder">
            <div class="block">
              <el-row>
                <el-col :span="5" style="text-align: center;">
                  <div class="grid-content bg-purple">孙健</div>
                </el-col>
                <el-col :span="5" style="text-align: center;">
                  <div class="grid-content bg-purple-light">李辉</div>
                </el-col>
                <el-col :span="4" style="text-align: center;">
                  <div class="grid-content bg-purple">王志国</div>
                </el-col>
                <el-col :span="6" style="text-align: center;">
                  <div class="grid-content bg-purple-light">陈明达</div>
                </el-col>
                <el-col :span="4" style="text-align: center;">
                  <div class="grid-content bg-purple-light">周亮</div>
                </el-col>
              </el-row>
              <el-image :src="src5" style="width: 250px; height: 300px; margin-left: 30px"></el-image>
              <el-image :src="src6" style="width: 250px; height: 300px; margin-left: 30px"></el-image>
              <el-image :src="src7" style="width: 250px; height: 300px; margin-left: 30px"></el-image>
              <el-image :src="src8" style="width: 250px; height: 300px; margin-left: 30px"></el-image>
              <el-image :src="src9" style="width: 250px; height: 300px; margin-left: 30px"></el-image>
            </div>
          </div>
          <el-button style="font-size: 25px; margin-left: 100px" type="primary"
            @click="dialogFormVisible = true">挂号预约</el-button>
          <el-button style="font-size: 25px; margin-left: 125px" type="primary"
            @click="dialogFormVisible = true">挂号预约</el-button>
          <el-button style="font-size: 25px; margin-left: 135px" type="primary"
            @click="dialogFormVisible = true">挂号预约</el-button>
          <el-button style="font-size: 25px; margin-left: 135px" type="primary"
            @click="dialogFormVisible = true">挂号预约</el-button>
          <el-button style="font-size: 25px; margin-left: 155px" type="primary"
            @click="dialogFormVisible = true">挂号预约</el-button>
          <el-dialog title="挂号预约" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="科室" :label-width="formLabelWidth">
                <el-select v-model="form.department" placeholder="请选择科室" style="width: 100%;">
                  <el-option label="药剂科" value="药剂科"></el-option>
                  <el-option label="护理科" value="护理科"></el-option>
                  <el-option label="体检科" value="体检科"></el-option>
                  <el-option label="体检科" value="体检科"></el-option>
                  <el-option label="心血管内科" value="心血管内科"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="联系方式" :label-width="formLabelWidth">
                <el-input v-model="form.number" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="身份证" :label-width="formLabelWidth">
                <el-input v-model="form.idcart" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="预约时间" :label-width="formLabelWidth">
                <el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button class="btn" type="primary" @click="btnc">确 定</el-button>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {

        src: "http://www.csey.cn/uploads/220315/1-2203151600521E.jpg",
        src1: "http://www.fztjyy.com/uploads/allimg/160524/38-16052409200IO.jpg",
        src2: "http://hospital.hnu.edu.cn/__local/D/97/68/0CD057C609A34BED4ABD57B537E_8843B67C_35CFC.jpg",
        src3: "https://file.youlai.cn/cnkfile1/M02/68/BA/CC23B7D95C7B1B4DEFC08C4FFFBD68BA.png",
        src4: "http://www.ystms.com.cn/uploads/allimg/20210128/1-21012Q0294A10.jpg",
        src5: "https://wenhui.whb.cn/u/cms/www/201907/190945291o6l.png",
        src6: "https://www.fuwaihospital.org/Sites/Uploaded/Doctor/20140066.jpg",
        src7: "https://health.jschina.com.cn/jkzt/ygkjs/mtjj/202012/W020201230511976911311.jpg",
        src8: "https://www.qcdy.com/uploads/allimg/210908/2279-210ZQ53503.jpg",
        src9: "https://www.hospital-cqmu.com/__local/D/11/91/0FD27720ACA377B873DA82C0905_BD8BB9DA_1912F.jpg",
        dialogFormVisible: false,
        form: {
          department: "",
          name: "",
          number: "",
          idcart: "",
          time: ""
        },
        formLabelWidth: "120px",
        userId: 0
      };
    },
    methods: {
      btnc() {
        axios.post("http://localhost:8080/hospital", this.form).then((res) => {

          alert('提交成功')
          this.dialogFormVisible = false
        })
      }
      , returnToHome: function () {
        if (this.userId == null) {
          this.$router.push({
            path: '/loginPage',
          })
        }
        else {
          this.$router.push({
            path: '/serviceindex',
            query: {
              loginUserId: this.userId
            }
          })
        }

      }
    },
    mounted() {
      this.userId = this.$route.query.loginUserId;
    },



  }

</script>

<style scoped></style>